<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pc端页面初始化.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="iconfon/iconfont.css">


</head>

<body>

    <!-- 轮播图 -->

    <!--头部公共区 -->
    <header class="header">
        <!-- 黑鲨logo -->
        <div class="content-center">
            <a class="logo">
                <div class="logo-img"></div>
                <span>黑鲨官网</span>
            </a>

            <!-- 导航 -->
            <nav class="nav">
                <ul>
                    <li>商城</li>
                    <li>以旧换新</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
            </nav>

            <!-- 导航搜索框 -->
            <div class="userCenter-search">
                <input type="text" placeholder="黑鲨">
                <img src="./image/index/search.png" alt="">
            </div>

            <!-- 图标 -->
            <ul class="icon">
                <li>
                    <a href="login.html">
                        <i class="iconfont icon-user_login person"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont icon-cart"></i>
                    </a>
                </li>
            </ul>

        </div>




        <div class="playimg">

            <div class="banner">
                <ul class="img">
                    <li>
                        <a href="#"><img src="./image/index/banner1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/index/banner2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/index/banner3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./image/index/banner4.jpg" alt=""></a>
                    </li>
                </ul>

                <!-- 原点 -->
                <ul class="dot">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li style="background-color: blue;"></li>
                </ul>
            </div>


        </div>
    </header>


    <!-- 内容区 -->
    <div class="pro-list">
        <div class="content-center-md">
            <p>新品预定</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price"></p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content-center-md">
            <p>腾讯黑鲨游戏手机3</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content-center-md">
            <p>腾讯黑鲨游戏手机3 Pro</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content-center-md">
            <p>热门游戏配件</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content-center-md">
            <p>黑鲨游戏壳/膜</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="" alt="">
                        </div>
                        <p class="pro-name"></p>
                        <p class="pro-price"></p>
                        <p class="pro-desc"></p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="content-center-md">
            <p>游戏耳机/适配器/数据线</p>
            <ul>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="block">
                        <i class="tag">新品</i>
                        <div class="img-col">
                            <img src="https://shop-1256119282.file.myqcloud.com/blackshark/20200731/20200731160050_651.png" alt="">
                        </div>
                        <p class="pro-name">腾讯黑鲨游戏手机3S 12G+128G天云黑</p>
                        <p class="pro-price">￥3999</p>
                        <p class="pro-desc">120Hz三星AMOLED屏、JOYUI12操作系统、下单立享12期免息</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 尾部引入 -->
    <div class="foot"></div>



</body>

</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function() {
        $(".foot").load("./import-foot.html")
    })
</script>
<script src="./js/index.js"></script>